<template>
  <div class="taskdetail">
    <div style="margin-bottom:13%;">
      <div v-if="taskdata.task_coupons == 1" style="position:sticky;top:0;width:100%;z-index:999;">
        <van-notice-bar text="注意：当前活动佣金不是立返，需后台24小时内审核之后才能提现！！！" left-icon="volume-o"/>
      </div>
      <div class="goods">
        <div class="goodsbox">
          <span class="typestyle"
                :class="{'red':taskdata.platform_type == 1,'green':taskdata.platform_type == 2,'blue':taskdata.platform_type == 3,'black':taskdata.platform_type == 4,'purple':taskdata.platform_type == 5,'pink':taskdata.platform_type == 6}">
            {{
              taskdata.platform_type == 1 ? '饿了么' : (taskdata.platform_type == 2 ? '大麦' : (taskdata.platform_type == 3 ? '大众点评' : (taskdata.platform_type == 4 ? '美团' : (taskdata.platform_type == 5 ? '小红书' : '其他'))))
            }}
          </span>
          <div style="text-align:center" class="mosaic">
            <viewer>
              <img :src="taskdata.picture_address" alt="" style="width:110px;height:110px;margin:0;">
            </viewer>
          </div>
          <p class="second">
            <span class="first">请在<span
              style="color:#ec0c36;"> {{ this.taskdata.create_time }} </span>前完成以下操作，否则将自动作废噢哦</span>
            <span class="first">本次活动账号：<span style="color:#1005a1;"> {{ this.taskdata.brushhands_name }} </span></span>
            <span style="color:red;font-weight:600;">本此活动佣金：{{ taskdata.user_commission }}元</span>
          </p>
        </div>
      </div>
      <div class="step">
        <van-divider dashed>活动流程</van-divider>
        <el-card style="font-size:25px;color:red;">这不是淘宝任务，按照商家提示做单，用浏览器打开直接做。</el-card>
        <div class="first">
          <p class="title" style="margin-bottom:10px;">注意事项：</p>
          <p class="sorting">链接：<span style="color:#ec0c36;" v-copy="taskdata.tips_info">{{ taskdata.link }}(点击复制链接)</span>
          </p>
          <p class="sorting">商家提示：<span style="color:#ec0c36;" v-copy="taskdata.tips_info">{{ taskdata.tips_info }}</span>(点击复制链接)</p>
          <p class="sorting">任务要求：<span style="color:#ec0c36;" v-copy="taskdata.task_requirement">{{ taskdata.task_requirement }}</span>(点击复制链接)</p>
        </div>
        <div class="first">
          <p class="title" style="margin-bottom:10px;">任务详情：</p>
          <p class="sorting">任务类型：
            <span style="color:#ec0c36;" v-if="taskdata.task_type == 1">购买</span>
            <span style="color:#ec0c36;" v-if="taskdata.task_type == 2">点赞任务（不需要购买）</span>
            <span style="color:#ec0c36;" v-if="taskdata.task_type == 3">评价任务</span>
            <span style="color:#ec0c36;" v-if="taskdata.task_type == 4">浏览任务（不需要购买）</span>
            <span style="color:#ec0c36;" v-if="taskdata.task_type == 5">问大家（问）（不需要购买）</span>
            <span style="color:#ec0c36;" v-if="taskdata.task_type == 6">问大家（答）（不需要购买）</span>
          </p>
          <p class="sorting">任务关键词：<span style="color:#ec0c36;" v-copy="taskdata.title">{{ taskdata.title }}</span>(点击复制关键词)
          </p>
          <p class="sorting" v-if="taskdata.task_type == 1">任务本金：<span style="color:#ec0c36;">{{
              taskdata.price
            }}</span></p>
          <div class="sorting">任务截图：
            <el-upload
              class="upload-demo"
              style="height:100px;"
              action="/api/v1/PI/task/evaluate_img"
              :headers="importHeaders"
              v-if="img==''"
              multiple
              :on-success="handleSuccess">
              <el-button size="small" type="primary" style="margin-top:20px;">点击上传</el-button>
            </el-upload>
            <div v-if="img!=''" style="display:flex;">
              <viewer>
                <img :src="img" style="width:100px;height:100px;border-radius:10px;" alt="">
              </viewer>
              <i class="el-icon-error" @click="handleRemove"></i>
            </div>
          </div>
        </div>
        <div class="btnlist">
          <div class="btn two" @click="submitRask()">提交任务</div>
          <div class="btn three" @click="cancelDialog = true;">取消活动</div>
        </div>
        <van-dialog v-model="cancelDialog" title="订单号" show-cancel-button @confirm="canTask"
                    @cancel="cancelDialog = false">
          <span class="istrue">确认取消当前活动吗？</span>
        </van-dialog>
        <van-dialog v-model="numDialog" title="订单号" show-cancel-button @confirm="extra_task_submits" @cancel="onCancel">
          <van-field v-model="numval" clearable label="订单号" left-icon="shopping-cart" placeholder="请输入订单编号"/>
        </van-dialog>
        <!--商家提示弹框-->
        <van-dialog v-model="Dialogs" :showConfirmButton="false" @cancel="Dialogs = false" class="bussness">
          <div style="display:flex;flex-direction: column;justify-content:space-around;align-items: center;">
            <span class="title" style="border-left:3px solid white;text-align: left;margin-top:10%">请认真阅读下面内容，不遵守冻结账户
            </span>
            <span style="color:#ec0c36;margin-top:5%;flex-wrap:nowrap;width:80%;">{{ taskdata.tipsninfo }}</span>
            <div class="yuedu" @click="finishs()">我已阅读</div>
          </div>
        </van-dialog>
      </div>
    </div>
    <return></return>
    <Footer permsg='2'>
    </Footer>
  </div>
</template>

<script>
import {
  extra_task_cancel,
  task_extra_info,
  extra_task_submit
} from '../api/api';
import Footer from '../components/footer.vue'
import aestool from '@/utils/aestool.js';
import moment from 'moment'
import Return from "./returnone";
import AgainReturn from "./AgainReturn";

export default {
  components: {AgainReturn, Return, Footer},
  data() {
    return {
      importHeaders: {token: localStorage.getItem('xfq_token')},
      sstext: '',
      sstext_FU: [],
      numDialog: false,
      socre: 5,
      Dialog_: false,
      Dialog: false,
      Dialog_zero: false,
      Dialogs: false,
      Dialoging: false,
      numval: '',
      active: "",
      shifu: false,
      taskdata: {},
      hour: '',
      logs: true,
      min: '',
      second: '',
      tipsninfo_ID: "",
      payment: false,
      taskStatus: '',
      shopname: '',
      cancelDialog: false,
      questionDialog: false,
      questionvalone: '',
      tipsninfo: [],
      tipsninfo_IMG: [],
      answervalone: '',
      questionvaltwo: '该商品的店铺全称是什么？',
      answervaltwo: '',
      llsuccess: false,
      showFlag: false,
      show: true,
      whereing: {},
      hourGY: "",
      minGY: "",
      secondGY: "",
      img: [],
      tip_all: []
    }
  },
  mounted() {
    this.task_extra_infos()
  },
  methods: {
    submitRask() {
      if (this.taskdata.task_type == 1) {
        this.numDialog = true
      } else {
        this.extra_task_submits()
      }
    },
    handleRemove() {
      this.img = ''
    },
    handleSuccess(res) {
      this.img = res.UrlImg
    },
    onCancel() {
      this.numDialog = false
    },
    extra_task_submits() {
      let parmas = {
        id: this.taskdata.id,
        image: this.img,
        order: this.numval
      }
      extra_task_submit(parmas).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.$router.push('/OtherUserlist')
        } else {
          this.$toast(res.Message)
        }
      })
    },
    task_extra_infos() {
      let params = {
        id: Number(this.$route.query.id)
      }
      task_extra_info(params).then((res) => {
        console.log(res);
        if (res.Status == 200) {
          this.taskdata = res.Data
        } else {
          this.$toast(res.Message)
        }
      })
    },
    canTask() {
      let params = {
        id: this.taskdata.id
      }
      extra_task_cancel(params).then((res) => {
        if (res.Status == 200) {
          this.$toast(res.Message)
          this.$router.push('/OtherUserlist')
        } else {
          this.$toast(res.Message)
        }
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
.taskdetail {
  padding-bottom 56px
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size 18px;

  .three {
    background red
    color white
  }

  .IMGAGE {
    width: 110px;
    height: 110px;
    position: relative;
  }

  .istrue {
    display block
    padding 10px 16px
  }

  .field {
    padding-bottom 0
  }

  .fieid {
    border 1px solid #f1f1f1
    margin 10px
  }

  .nodata {
    padding-top: 80px
    display flex
    flex-direction column
    justify-content center
    align-items center

    img {
      width 70%
    }

    .textcontent {
      font-size 14px
      color #a79478
    }

    .taskbtn {
      width 200px
      color #ffffff
      font-size 14px
      background #64c5ff
      text-align center
      line-height 36px
      margin-top 20px
    }
  }

  .countbox {
    position sticky
    top 0
    z-index 999
    width 100%
    color rgb(25, 137, 250)
    background rgb(236, 249, 255)
    text-align center
    display flex
    align-items center
    height 40px
    justify-content center
    font-size 14px

    .van-count-down, .van-divider {
      color rgb(25, 137, 250)
    }
  }

  .green {
    background #00d5c3
  }

  .red {
    background #f54d21
  }

  .blue {
    background #04a7f5
  }

  .darkgreen {
    background darkgreen
  }

  .goods {
    background url(../assets/img/task.jpg) no-repeat top center
    background-size cover
    height 142px
    position relative

    .goodsbox {
      position absolute
      padding 30px 10px
      background #fff
      margin 56px 30px 20px
      font-size 14px
      border-radius 6px
      box-shadow 0px 1px 8px 0px #eaeaea

      .typestyle {
        position: absolute;
        display inline-block
        line-height 24px
        color white
        padding 0 10px
        border-top-right-radius 12px
        border-bottom-right-radius 12px
      }

      .first {
        display block
        line-height 20px
      }

      img {
        width 80px
        height 80px
        margin-bottom 10px
      }
    }
  }

  .step {
    margin-top 160px

    .keyword {
      padding 10px 16px
      font-size 14px
    }

    .first {
      padding 0 16px

      .btntwo {
        display flex
        justify-content space-between
        align-items center
        margin 0 15px 10px 10px

        span {
          display block
          text-align center
          border-radius 20px
          font-size 14px
          width 49%
          line-height 35px
          color #fff
        }

        .check {
          background #ff976a
        }

        .clear {
          background #1989fa
        }
      }

      .title {
        border-left 3px solid #5463f0
        padding-left 10px
        font-size 14px

        .copy {
          color #02acfa
          text-decoration underline
        }
      }

      .sorting {
        padding 0 16px 10px
        font-size 14px
      }

      .iptstyle {
        border 0
        background #f1f1f1
        border-radius 6px
        padding 10px
        font-size 14px
        width 87%
        margin 10px 10px 0 10px
      }
      textarea:

      :-webkit-input-placeholder {
        color #929292
        font-size 14px
      }
    }

    .tips {
      background #fccbcb
      color #e9010e
      padding 5px 16px
      font-size 14px
    }

    .btnlist {
      display flex
      justify-content space-around
      align-items center
      font-size 14px
      margin 10px 0

      .btn {
        width 30%
        line-height 40px
        text-align center
        border-radius 20px
      }

      .one {
        color #5463f0
        background #f2f2f2
      }

      .two {
        color #ffffff
        background #5463f0
      }
    }
  }
}
</style>

<style>
.first .van-cell:not(:last-child)::after {
  border-bottom: 0;
}

.bussness {
  width: 90%;
  display: flex;
  background: url("../assets/bluebk.png");
  background-size: 100% 100%;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  height: 450px;
  flex-direction: column;
  overflow-y: scroll;
}

.yuedu {
  width: 80%;
  font-size: 18px;
  border-radius: 10px;
  height: 50px;
  position: absolute;
  bottom: 10%;
  left: auto;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}

.confirms {
  width: 30%;
  font-size: 16px;
  border-radius: 10px;
  height: 40px;
  position: absolute;
  bottom: 5%;
  left: 10%;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}

.cancels {
  width: 30%;
  font-size: 16px;
  border-radius: 10px;
  height: 40px;
  position: absolute;
  bottom: 5%;
  left: 60%;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}

.yanzheng {
  background: url("../assets/stars.png");
  background-size: 100% 100%;
  height: 400px;
  width: 80%;
  font-size: 18px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yanzheng_ {
  /*background: url("../assets/stars.png");*/
  /*background-size: 100% 100%;*/
  overflow-y: scroll;
  height: 600px;
  width: 80%;
  font-size: 18px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yuedu_ {
  width: 80%;
  font-size: 18px;
  border-radius: 10px;
  height: 50px;
  position: absolute;
  bottom: 10%;
  left: 10%;
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(left, rgb(62, 128, 255), rgb(77, 173, 255));
}
</style>
